
<template>


<div class="app2">
    <!--头部-->
    <div id="_header">
        <div style="background-color: #8f000b; height: 110px;">
            <span style="width: 50%;height:100%;" ><img src="../../../static/img/scgsxy_logo.png" style="float: left; height:40%;padding: 2% "/></span>
            <span style="width: 50%;height:100%;" ><img src="../../../static/img/pkucloud1h100.png" style="float: right;height:50%;"/></span>
        </div>
        <div class="app1">
            <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" active-text-color="#8f000b">
                <el-menu-item style="width: 7rem  ;" index="1"><router-link :to="{name:'Home-page'}">首页</router-link></el-menu-item>
                <el-menu-item style="width: 7rem ; " index="2"><router-link :to="{name:'Competition-dynamics'}">竞赛动态</router-link></el-menu-item>
                <el-menu-item style="width: 7rem  ;" index="3"><router-link :to="{name:'Success-competition'}">竞赛佳绩</router-link></el-menu-item>
                <el-menu-item style="width: 7rem  ;" index="7"><router-link :to="{name:'About-us'}">获奖名单</router-link></el-menu-item>
                <el-menu-item  index="4" style="float: right; margin: auto 0;" v-if="!show_ind">
                    <router-link :to="{name:'Land'}"><el-button type="primary" plain @click="toLand">登录</el-button></router-link>
                    <router-link :to="{name:'Registe'}"><el-button type="danger" plain @click="toRegiste">注册</el-button></router-link>
                </el-menu-item>
                <!-- 已登录组件 -->
                <el-submenu index="6" style="float: right; " v-if="show_ind">
                    <template slot="title">欢迎您！{{schoolNum}}</template>
                    <el-menu-item index="6-1"  style="width: 20px"><router-link :to="{name:'PersonalInfo'}">设置</router-link></el-menu-item>
                </el-submenu>
                <el-submenu index="5" style="float: right;" v-if="show_ind">
                    <template slot="title">我的</template>
                    <el-menu-item index="5-1" style="width: 10px"><router-link :to="{name:'Mygame'}">比赛</router-link></el-menu-item>
                    <el-menu-item index="5-2"  style="width: 10px"><router-link :to="{name:'Personal-achievement'}">获奖</router-link></el-menu-item>
                </el-submenu>
                <el-menu-item index="4" style=" float: right;" v-if="show_ind "><el-button type="danger" plain @click="logout" >退出</el-button></el-menu-item>
            </el-menu>
        </div>
    </div>
             <!--轮播图-->
            <div>
                <el-carousel :interval="4000" type="card" height="350px" width="100%">
                    <el-carousel-item v-for="item in imgList" :key="item">
                        <h3><img :src="item" alt=""> </h3>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div style="margin:20px 20px ">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item >首页</el-breadcrumb-item>
                    <el-breadcrumb-item>竞赛动态</el-breadcrumb-item>
                    <el-breadcrumb-item>竞赛列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--竞赛列表-->
            <div style="margin-left: 20px">
                <el-table
                    :data="tableData3"
                    height="250"
                    border
                    style="width: 100%;font-size:15px">
                    <el-table-column
                        prop="comp_name"
                        label="竞赛名称"
                        width="200"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="holder"
                        label="举办方"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="comp_style"
                        label="竞赛类型"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="comp_grade"
                        label="竞赛等级"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="team_scale"
                        label="团队规模">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="100">
                        <template slot-scope="scope">
                            <router-link
                                :to="{
                                         path:'/competition-details',
                                      }">
                            <el-button  type="primary"  >详情</el-button>
                            </router-link>

                            <router-link
                                :to="{
                                          path:'/enroll'
                                      }">
                                <el-button  type="danger">报名</el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
    <!--分页-->
    <div style="margin: 20px 0">
    <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
    </el-pagination>
    </div>
    <!--底部-->
    <div class="footer" style="padding: 0; background-color: white; z-index: -1;">
        <div id="_img" style="position: relative; height: 60px;">
            <div id="_img1" style="overflow: hidden;">
                <ul><li>
                    <img src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">//1
                    <img  src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">
                </li></ul>

            </div>
            <div id="_img2" style="overflow: hidden;">
                <ul><li>
                    <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                    <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                </li></ul>
            </div>

        </div>
        <div style="background-color: rgb(0,159,217);">
            <div style="  width: 80%; margin: 0 auto;">
                <div class="fot-l"> 成都校区：四川省成都市郫都区团结镇学院街65号 邮编：611745<br>
                    眉山校区：眉山市眉州大道岷东段9号 邮编：620000<br>
                    联系电话&nbsp;&nbsp;&nbsp;&nbsp;招办：(028)87953080 校办:(028)87953896 人事处：(028)87953900 后勤处：(028)87953092<br>
                    Email：yb@stbu.edu.cn&nbsp;&nbsp; <br>
                    技术支持：四川工商学院1205
                </div>
                <div class="font-r">
                    <ul id="_footer_ul">
                        <li style="margin-left: 0;"> <span><img src="../../../static/img/weixin.jpg" width="100%" height="100%" ></span> <i>微信</i> </li>
                        <li> <span><img src="../../../static/img/QQ.jpg" width="100%" height="100%"></span> <i>QQ智慧校园</i> </li>
                        <li> <span><img src="../../../static/img/weibo.jpg" width="100%" height="100%"></span> <i>微博</i> </li>
                        <li> <span><img  src="../../../static/img/vr.png" width="100%" height="100%"></span> <i>VR工商</i> </li>
                    </ul>
                </div>
            </div>
            <br>
        </div>
    </div>

</div>

</template>

<!--suppress JSAnnotator -->
<script>

    export default {
        data() {
            return{
                myBarOption:{
                    barColor:"red"
                },
                imgList: [
                    require('../../../static/img/match_pic5.jpg'),
                    require('../../../static/img/match_pic6.png'),
                    require('../../../static/img/match_pic8.jpg'),
                    require('../../../static/img/match_pic7.jpg'),
                    require('../../../static/img/match_pic8.jpg'),
                    require('../../../static/img/match_pic6.png'),
                    require('../../../static/img/lanqiao.png'),
                ],tableData3: [{
                    comp_name: 'ACM国际邀请赛 ',
                    holder: '四川工商学院',
                    comp_style: '创业商业',
                    comp_grade: '国际级',
                    team_scale: '5'
                },{
                    comp_name: '数学建模挑战赛 ',
                    holder: '数学建模协会',
                    comp_style: '数学',
                    comp_grade:'校级',
                    team_scale:'3'
                }, {

                    comp_name: '全国大学生数学建模竞赛 ',
                    holder: '工信部',
                    comp_style: '数学',
                    comp_grade:'国家级',
                    team_scale:'3'
                }, {
                    comp_name: '电子设计大赛 ',
                    holder: '电子学院',
                    comp_style: '科技创新',
                    comp_grade:'国家级',
                    team_scale:'3'
                }, {
                    comp_name: 'ACM国际邀请赛 ',
                    holder: '四川工商学院',
                    comp_style: '创业商业',
                    comp_grade:'国际级',
                    team_scale:'5'
                }, {
                    comp_name: '数学建模挑战赛 ',
                    holder: '数学建模协会',
                    comp_style: '数学',
                    comp_grade:'校级',
                    team_scale:'3'
                },
                    {
                        comp_name: '电子设计大赛 ',
                        holder: '电子学院',
                        comp_style: '科技创新',
                        comp_grade:'国家级',
                        team_scale:'3'}]
            }
        },
        methods: {
            toLand(){
                this.$router.push({name:'Land'})
            },
            toRegiste() {
                this.$router.push({name: 'Registe' })
            },
            logout(){
                var storage=window.localStorage;
                storage.clear();
                if(!window.localStorage){
                    alert("浏览器支持localstorage");
                }else{
                    var storage=window.localStorage;
                    //第三种方法读取
                    this.schoolNum=storage.getItem("username");
                    console.log(this.schoolNum);
                    if(this.schoolNum==null)
                        this.show_ind=false;
                }
            },
        },
        created() {
            if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                //第三种方法读取
                this.schoolNum=storage.getItem("username");
                console.log(this.schoolNum);
                if(this.schoolNum!=null)
                    this.show_ind=true;
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 350px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .app2{
        overflow: auto;
        width: 100%;
        height: 100%;
    }
    @keyframes move_wave {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-30%);
        }
        100% {
            transform: translateX(0);
        }
    }
    #_img1 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 15;
    }
    #_img2 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 10;
    }
    #_img1>ul, #_img2>ul {
        padding: 0;
    }
    #_img1>ul>li, #_img2>ul>li {
        list-style-type: none;
    }
    #_footer_ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0;
        display: flex;
    }
    #_footer_ul li {
        list-style-type: none;
        width: 100px;
        height: 100px;
        margin: 0 10px;

    }
</style>
